import React, {useEffect, useRef, useState} from "react";

//加载更多组件
const LoadMore=(props)=>{
    const more=useRef();
    //加载顶部到下面div的距离
    const [LoadTop,setLoadTop]=useState(1000);

    /*
    * 知识点1：let和const的区别？
    *       1.const声明之后必须初始化，并且声明之后不能进行更改。let可以更改，值和类型都可以改变
    *
    *
    * */
    useEffect(()=>{
        //窗口可见区域的高度
        let winHeight=document.documentElement.clientHeight

        let timer=null

        //创建滚动事件，监听屏幕滚动
        window.addEventListener("scroll",()=>{
            console.log("滚动了")
            // console.log("more,current"+more.current)
            if (more.current){
                setLoadTop(more.current.getBoundingClientRect().top)
                // console.log("more.current"+more.current.getBoundingClientRect().top)
                // console.log("winHeight"+winHeight)
                //节流，300ms之内只加载一次
                if(timer){
                    clearTimeout()
                }else {
                   timer=setTimeout(()=>{
                           if (winHeight>LoadTop){
                               console.log("加载更多数据")
                                props.OnloadMore()
                           }
                       },
                   300)

                }

            }
        })


    },[])

    return(
        <div className='load' ref={more}>
            加载更多
        </div>
    )
}

export default LoadMore